import { reactive, toRaw, Ref } from 'vue'
import { Store } from 'vuex'
import { AllStateType } from '@/store/storeType'
import { paginationObjProps, addCateFormProps } from './CategoriesDefaults'
import { findNameFn } from '@/hooks/useFindCat_nameFn'
import { MessageFunc } from '@/utils/ElMessageFunc'
import axios from 'axios'

// 分页器事件
export const paginationEvents = () => {
  const paginationObj = reactive<paginationObjProps>({
    type: 3,
    pageSize: 5,
    pageNum: 1,
    total: 0
  })
  const handleSizeChange = (val: number) => {
    paginationObj.pageSize = val
  }
  const handleCurrentChange = (val: number) => {
    paginationObj.pageNum = val
  }

  return { handleSizeChange, handleCurrentChange, paginationObj }
}

// 添加分类按钮相关事件
export const addCategoriesClickEvent = (store: Store<AllStateType>, paginationObj: paginationObjProps, new_data: Ref<any>) => {
  // 对话框打开与关闭相关参数
  const dialogObj = reactive({
    dialogVisible: false,
    cat_id: 0
  })
  
  // 添加分类按钮点击事件
  const addCategories = () => {
    if (store.state.paramsModule.categoriesList.length !== 0) {
      (parentCateObj.parentCateList as any) = store.state.paramsModule.categoriesList
    } else {
      store.dispatch('getCategoriesList', { type: 2 }).then(((res: any) => parentCateObj.parentCateList = res.data.data))
    }
    dialogObj.dialogVisible = true
  }

  // 对话框input框参数与事件
  const addCateForm = reactive<addCateFormProps>({
    cat_name: '',
    // 父级分类的Id
    cat_pid: 0,
    // 分类的等级，默认要添加的是1级分类
    cat_level: 0
  })
  // input 框规则
  const addCateFormRules = reactive({
    cat_name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }]
  })

  // 联级选择框数据和事件集合
  const parentCateObj = reactive({
    parentCateList: [],
    cascaderProps: {
      value: 'cat_id',
      label: 'cat_name',
      children: 'children',
      expandTrigger: 'hover'
    },
    selectedKeys: [],
    parentCateChanged() {
      if (parentCateObj.selectedKeys.length > 0) {
        addCateForm.cat_pid = parentCateObj.selectedKeys[parentCateObj.selectedKeys.length - 1]
        // 为当前分类的等级赋值
        addCateForm.cat_level = parentCateObj.selectedKeys.length
      } else {
        addCateForm.cat_pid = 0
        // 为当前分类的等级赋值
        addCateForm.cat_level = 0
      }
    }
  })

  // 添加按钮对话框确定按钮点击事件
  const dialogSubmitClick = () => {
    store.dispatch('postCategories', {
      cat_pid: addCateForm.cat_pid,
      cat_name: addCateForm.cat_name,
      cat_level: addCateForm.cat_level,
      cat_id: addCateForm.cat_pid,
      pageNum: paginationObj.pageNum
    }).then((res: any) => {
      new_data.value = toRaw(store.state.categoriesModule.categoriesPageObj[paginationObj.pageNum].result)
      addCateForm.cat_name = ''
      parentCateObj.selectedKeys = []
      dialogObj.dialogVisible = false
      if (res?.status !== 200) {
        MessageFunc('warning', '参数错误')
      } else if (res?.status === 200) {
        MessageFunc('success', '添加成功')
      }
    }).catch(() => MessageFunc('error', '添加请求失败'))
  }
  return { addCategories, dialogSubmitClick, parentCateObj, dialogObj, addCateForm, addCateFormRules }
}

// 分类编辑对话框事件与相关参数
export const EditDialogEventsAndParams = (store: Store<AllStateType>, new_data: Ref<any>, paginationObj: paginationObjProps) => {
  // 对话框打开或关闭
  const editDialogObj = reactive({
    editDialogVisible: false,
    cat_id: 0
  })
  // 对话框input 绑定
  const editForm = reactive({
    cat_name: ''
  })
  // 对话框Input 规则
  const editFormRules = reactive({
    cat_name: [
      { required: true, message: '请输入分类名称', trigger: 'blur' }
    ]
  })
  // 编辑按钮点击事件
  const redactClick = (cat_id: number) => {
    editDialogObj.editDialogVisible = true
    editDialogObj.cat_id = cat_id
    editForm.cat_name = (findNameFn(new_data.value, cat_id) as any[]).join('')
  }
  // 编辑对话框确认按钮
  const editDialogSubmitClick = () => {
    store.dispatch('putCategoriesName', {
      cateId: editDialogObj.cat_id,
      cat_name: editForm.cat_name
    }).then((res) => {
      if (res?.status === 200) {
        new_data.value = toRaw(store.state.categoriesModule.categoriesPageObj[paginationObj.pageNum].result)
        MessageFunc('success', '编辑更新成功')
      } else {
        MessageFunc('warning', '编辑更新失败')
      }
    }).catch(() => MessageFunc('error', '编辑请求失败'))
    editForm.cat_name = ''
    editDialogObj.editDialogVisible = false
  }
  // 删除按钮
  const DeleteClick = async (catDataId: number) => {
    const res = await axios.delete(`categories/${catDataId}`)
    if (res?.status === 200) {
      store.commit('CategoriesDelete', { pageNum: paginationObj.pageNum, cat_id: catDataId })
      new_data.value = toRaw(store.state.categoriesModule.categoriesPageObj[paginationObj.pageNum].result)
      MessageFunc('success', '删除成功')
    }
  }

  return { redactClick, editDialogSubmitClick, DeleteClick, editDialogObj, editForm, editFormRules }
}